<template>
  <div class="main-box main-box-cursor flex-center-wrap" @click="showSelectBox">
    <div
      class="main-box-text main-box-cursor ell"
      :class="!currentSubject.subject_name ? 'main-box-text-empty' : ''"
    >
      {{ currentSubject.subject_name || '请选择答疑科目' }}
    </div>
    <i
      class="el-icon-arrow-down main-box-icon main-box-cursor"
      :class="this.isShowSelectBox ? 'main-box-icon-rotate' : ''"
      color="#999999"
    ></i>
    <div class="cascade-box flex-wrap" v-if="isShowSelectBox">
      <div class="level-box">
        <div
          v-for="(item, index) in data"
          :key="index"
          class="ell first-level-item"
          :class="
            selectedContent[0] && +selectedContent[0] === +item.industry_id
              ? 'level-item-active'
              : ''
          "
          @mouseenter="chooseItem(1, item)"
        >
          {{ item.industry_name }}
        </div>
      </div>
      <div class="level-box" v-if="secondLeveldata.length">
        <div
          v-for="(item, index) in secondLeveldata"
          :key="index"
          class="ell first-level-item"
          :class="
            selectedContent[1] && +selectedContent[1] === +item.profession_id
              ? 'level-item-active'
              : ''
          "
          @mouseenter="chooseItem(2, item)"
        >
          {{ item.profession_name }}
        </div>
      </div>
      <div class="level-box" v-if="thirdLeveldata.length">
        <div
          class="third-level-box"
          :style="{ height: 'calc(100% - ' + slotButtonHeight + ')px' }"
        >
          <div
            v-for="(item, index) in thirdLeveldata"
            :key="index"
            class="ell first-level-item"
            :class="{
              'level-item-active':
                selectedContent[2] && +selectedContent[2] === +item.subject_id,
              'level-item-power': item.isHavePower,
              'level-item-active-last': isSelectSubjectId === item.subject_id
            }"
            @click="chooseItem(3, item)"
          >
            {{ item.subject_name }}
            <i
              class="el-icon-check"
              v-if="
                selectedContent[2] && +selectedContent[2] === +item.subject_id
              "
            ></i>
          </div>
        </div>
        <!-- 按钮插槽 -->
        <div ref="buttonSlot">
          <slot name="button" :data="subjectOptions"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zl-cascade',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      //是否展示选择框
      isShowSelectBox: false,
      //已选择内容
      selectedContent: [],
      secondLeveldata: [],
      thirdLeveldata: [],
      //当前选择的专业
      currentProfession: {},
      //当前选择的科目
      currentSubject: {},
      //插槽高度
      slotButtonHeight: 0,
      //父组件使用的数据
      subjectOptions: {},
      //当前选择
      isSelectSubject: ''
    }
  },
  methods: {
    //开始选择
    showSelectBox(e) {
      if (this.disabled) return
      let arr = Array.from(e.target.classList)
      if (arr.includes('main-box-cursor')) {
        this.isShowSelectBox = !this.isShowSelectBox
        if (!this.isShowSelectBox && !this.selectedContent.length) {
          this.secondLeveldata = []
          this.thirdLeveldata = []
        }
      }
    },
    //选择节点
    chooseItem(level, item) {
      //选择行业
      if (level === 1) {
        this.selectedContent = []
        this.selectedContent.push(item.industry_id)
        this.secondLeveldata = item.profession_list || []
        this.thirdLeveldata = []
        this.clearSubject()
        return
      }
      //选择专业
      if (level === 2) {
        this.selectedContent.splice(1, 2)
        this.selectedContent.push(item.profession_id)
        this.thirdLeveldata = item.subject_list || []
        this.currentProfession = item
        this.clearSubject()
        if (this.thirdLeveldata.length) {
          let currentItem = this.thirdLeveldata[0]
          // this.chooseItem(3,currentItem)
        }
        return
      }
      //选择科目
      this.selectedContent.splice(2, 1)
      this.selectedContent.push(item.subject_id)
      this.currentSubject = item
      this.subjectOptions = {
        profession_id: this.selectedContent[1],
        subject_id: this.currentSubject.subject_id,
        isHavePower: item.isHavePower,
        profession_name: this.currentProfession.profession_name,
        subject_name: item.subject_name
      }
      this.isSelectSubjectId = item.subject_id

      if (item.isHavePower) {
        // 关闭弹窗
        this.isShowSelectBox = false
      }
      this.$emit('finishChoose', this.subjectOptions)
      // this.$emit('change', this.selectedContent)
    },
    //清空已选科目
    clearSubject() {
      this.currentSubject = {}
      this.subjectOptions = {}
      this.isSelectSubjectId = ''
    }
  },
  mounted() {
    this.$bus.$on('closeCascade', () => {
      this.isShowSelectBox = false
    })
  },
  updated() {
    this.$nextTick(() => {
      if (this.$refs.buttonSlot) {
        this.slotButtonHeight = this.$refs.buttonSlot.offsetHeight
      }
    })
  },
  watch: {
    value: {
      handler(val) {
        if (!val || !val.length) return
        this.selectedContent = val
        this.chooseItem(
          1,
          this.data.filter(item => +val[0] === +item.industry_id)[0]
        )
        this.chooseItem(
          2,
          this.secondLeveldata.filter(
            item => +val[1] === +item.profession_id
          )[0]
        )
        this.chooseItem(
          3,
          this.thirdLeveldata.filter(item => +val[2] === +item.subject_id)[0]
        )
        // this.isShowSelectBox = true
        // this.$emit('change', this.selectedContent)
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.main-box {
  position: relative;
  width: 200px;
  height: 36px;
  padding: 6px 38px 6px 12px;
  border: 1px solid #f2f2f2;
  border-radius: 8px;
}
.main-box-text {
  width: 100%;
  line-height: 24px;
  font-size: 16px;
  color: #383838;
}

.main-box-text-empty {
  font-size: 14px;
  color: #999;
}
.main-box-icon {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 12px;
  transition: all 0.3s;
}
.main-box-cursor {
  cursor: pointer;
}
.main-box-icon-rotate {
  transform: rotate(180deg);
}

.cascade-box {
  z-index: 100;
  position: absolute;
  top: 46px;
  left: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 0.3);
}
.level-box {
  height: 240px;
  padding: 10px 0;
  overflow: auto;
}

.level-box::-webkit-scrollbar,
.third-level-box::-webkit-scrollbar {
  width: 4px;
}

.third-level-box {
  height: 158px;
  overflow: auto;
}

.first-level-item {
  width: 200px;
  line-height: 20px;
  padding: 10px 12px;
  font-size: 14px;
  color: #666666;
}
.first-level-item:hover {
  background-color: #f5f5f5;
  color: #383838;
}
.level-item-power {
  background-color: #f5f9ff;
  color: #383838;
}
.level-item-active {
  background-color: #f5f5f5;
  color: #383838;
}
.level-item-active-last {
  background-color: #fff;
  color: #3480ff;
}
.el-icon-check {
  margin-left: 6px;
}
</style>
